<template>
    <div id="CopyrightBox" class="copyrightBox">
        <i class="fa fa-chevron-up copyrightBox-lookIcon"></i>

        <a href="#" class="copyrightBox-copyrightItem">
            网站须知
        </a>

        <a href="#" class="copyrightBox-copyrightItem">
            关于TBJIE
        </a>

        <span class="copyrightBox-copyrightItem">
            赣公网安备XXXXXXXXXXX号
        </span>

        <span class="copyrightBox-copyrightItem">
            ©2021 TBJIE
        </span>

        <a href="#" class="copyrightBox-copyrightItem">
            帮助中心
        </a>
    </div>
</template>

<script>
    export default {
        name: "CopyrightBox"
    }
</script>

<style lang="scss" scoped>
    /* 底部浮动信息栏 */
    .copyrightBox {
        position: fixed;
        bottom: -2.5em;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        padding: 3em 5em 0.75em;
        font-size: 14px;
        text-align: center;
        background: rgba(125, 125, 125, 0);
        z-index: 2;
        transition: all 0.4s linear;

        &:hover {
            bottom: 0;
            background: rgba(125, 125, 125, 0.75);

            .copyrightBox-copyrightItem {
                color: #eeeeee;
                transform: translateY(-1em);
            }

            .copyrightBox-lookIcon {
                opacity: 0;
            }
        }

        span, i, b, u {
            cursor: default;
        }
    }
    .copyrightBox-lookIcon {
        position: absolute;
        top: 0.5em;
        left: 50%;
        transform: translateX(-50%);
        font-size: 22px;
        color: #999999;
        opacity: 1;
        transition: all 0.4s linear;
    }
    .copyrightBox-copyrightItem {
        position: relative;
        display: inline-block;
        height: 2em;
        margin: 0 0.75em;
        padding-left: 0.4em;
        font-weight: 300;
        letter-spacing: 0.4em;
        line-height: 2em;
        text-decoration: none;
        color: #333333;
        transition: all 0.4s linear;

        &::before {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 1px;
            background: #ffffff;
            content: '';
            transition: all 0.4s linear;
        }

        &:hover::before {
            width: 100%;
        }
    }
</style>
